<template>
	<view class="app">
		<view class="price-box">
			<text>支付金额</text>
			<text class="price">{{payment.needPay}}</text>
		</view>

		<view class="pay-type-list">
			<view class="type-item" @click="changePayType(1)">
				<text class="icon yticon icon-erjiye-yucunkuan"></text>
				<view class="con">
					<text class="tit">余额支付</text>
					<text>可用余额 ¥{{payment.userMoney}}</text>
				</view>
				<label class="radio">
					<radio value="" color="#fa436a" :checked='payType == 1' />
					</radio>
				</label>
			</view>
			<view class="type-item b-b" @click="changePayType(2)" >
				<text class="icon yticon icon-weixinzhifu"></text>
				<view class="con">
					<text class="tit">微信支付</text>
					<text>推荐使用微信支付</text>
				</view>
				<label class="radio">
					<radio value="" color="#fa436a" :checked='payType == 2' />
					</radio>
				</label>
			</view>
			<view class="type-item b-b" @click="changePayType(3)">
				<text class="icon yticon icon-alipay"></text>
				<view class="con">
					<text class="tit">支付宝支付</text>
				</view>
				<label class="radio">
					<radio value="" color="#fa436a" :checked='payType == 3' />
					</radio>
				</label>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<button class="mix-btn" @click="confirm(false)">确认支付</button>
		<!-- #endif -->
		<!-- <button class="mix-btn" @click="confirm(false)">确认支付</button> -->
		<!-- #ifdef MP-WEIXIN -->
		<button class="mix-btn" v-if="userInfo && !userInfo.openid" open-type="getUserInfo" @getuserinfo="confirm(false)">确认支付</button>
		<button class="mix-btn" v-if="userInfo && userInfo.openid" @click="confirm(false)">确认支付</button>
		<!-- #endif -->

		<!-- <modal ref="pwd" title="支付密码" width="500rpx">
			<view class="inputContain">
				<input type="password" :maxlength="8" @input="inputChange" :value="payPwd" />
			</view>
			<view class="inputContain">
				<view class="paybtn" @click="confirm(true)">
					支付
				</view>
			</view>
		</modal> -->
		
		<!-- 密码弹框 -->
		<uni-popup ref="payPopup" type="center" :mask-click="true">
			<view class="pay-popup">
				<view class="popup-top">
					<view></view>
					<view class="popup-title">支付密码</view>
					<view></view>
				</view>
				<view class="pas-box">
					<view class="popup-pas">
						<input type="password" v-model="payPwd"  placeholder-style="color: #BBC0CB;" placeholder="请输入支付密码" />
					</view>					
				</view>
				<view class="popup-btn">
					<view class="btn" @click="closeFn()">取消</view>
					<view class="btn" @click="confirm(true)">确定</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	// import modal from "@/components/myModal/myModal.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import {
		userInfo
	} from "@/common/loadUserInfo.js"
	export default {
		components: {
			// modal,
			uniPopup
		},
		data() {
			return {
				userInfo: {},
				payType: 1,
				payPwd: '',
				orderInfo: {},
				payment: {}
			};
		},
		computed: {

		},
		onLoad(options) {
			console.log(options)
			let _this = this;
			this.loadData(options.pkey)
			// #ifdef MP-WEIXIN
			wx.login({
				provider: 'weixin',
				success: function(loginRes) {

					console.log(loginRes)
					let code = loginRes.code
					_this.$Request.request('/api/users/openid', 'POST', {
						code
					}).then(res => {

					})
					// 设置用户openid
				}
			});
			// #endif
		},
		
		onShow() {
			var that = this;
			userInfo({
				success: (res) => {
					that.userInfo = res.data.userinfo
					uni.setStorageSync('userDetail', that.userInfo)
				},
				fail: (err) => {
				}
			})
		},

		methods: {
			closeFn(){
				this.payPwd = '';
				this.$refs.payPopup.close()
			},
			inputChange(e) {
				this.payPwd = e.detail.value
			},
			//选择支付方式
			changePayType(type) {
				this.payType = type;
			},
			confirmPay() {
				this.$refs.pwd.close()
			},
			//确认支付
			confirm(is_true = false) {
				let _this = this
				// return false;
				if (_this.payType == 1) {
					if (!is_true) {
						if(!_this.userInfo.payPwd){
							return uni.showModal({
								title: '提示',
								content: '您未设置支付密码，请先设置密码',
								success: (res)=> {
									if (res.confirm) {
										// console.log('用户点击确定');
										uni.navigateTo({
											url: '/subPackage/payPwd/payPwd?type=reset'
										})
									} else if (res.cancel) {
										// console.log('用户点击取消');
									}
								}
							})
						}else {
							return _this.$refs.payPopup.open()
						}
					}
					// 余额支付
					_this.wallerPay()
				} else if (_this.payType == 2) { // 微信
					// #ifdef APP-PLUS 
					_this.wxPay('uniapp')
					// #endif 

					// #ifdef H5 || MP-WEIXIN 
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							console.log(loginRes);
							let code = loginRes.code
							_this.wxPay('mini')
						}
					});
					// #endif 
				} else if (_this.payType == 3) {
					// #ifdef APP-PLUS
					console.log(_this.pkey)
					_this.$Request.request('/api/weixinpays/toAliPay', 'POST', {
						pkey: _this.pkey,
						from: 'uniapp',
					},true).then(res=>{ 
						console.log(res.data)
						if(res.status == 1){
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: res.data.orderInfo,
							success: function(res) {
								_this.$api.msg(`支付成功`)
								setTimeout(() => {
									uni.redirectTo({
										url: '/pages/money/paySuccess'
									})
								}, 800)
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						})
						}
					})
					//#endif
				}

			},
			loadData(pkey) {
				// pkey = "gKZ2rIN4paiAeHTcr6qnYYO5qrGv25euhXaurICazKyAzHqtg4mlqQ"
				this.pkey = pkey
				let that = this
				that.$Request.request('/api/Wallets/payment', 'POST', {
					pkey
				}, true).then(res => {
					if (res.status == 1) {

						console.log(res)
						this.orderInfo = res.data.rs
						this.payment = res.data
					}
				}).catch(err => {
					console.log(err)
				})
				
				// 不需要再拿用户信息
				// this.$Request.request('/api/users/getUserInfo', 'GET', {}, true).then(res => {
				// 	console.log(res)
				// 	if (res.status == 1) {
				// 		this.userInfo = res.data.userinfo
				// 	}

				// }).catch(err => {
				// 	console.log(err)
				// })
			},
			wallerPay() {
				console.log('111')
				if (this.payPwd == '') {
					return this.$api.msg('请输入支付密码')
				}
				let that = this
				let params = {
					payPwd: that.payPwd,
					orderNo: that.payment.data.orderNo,
					isBatch: that.payment.data.isBatch
				}
				that.$Request.request('/api/Wallets/payByWallet', 'POST', params, true).then(res => {
					if (res.status == 1) {
						that.$api.msg(res.msg)
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/money/paySuccess'
							})
						}, 800)

					}
					console.log(res.status)
					if (res.status == -1) {
						that.$api.msg(res.msg)
					}
					if (res.status == 902) {
						that.$api.msg(res.msg)
						setTimeout(() => {
							uni.navigateTo({
								url: '/subPackage/payPwd/payPwd?type=reset'
							})
						}, 1000)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			wxPay(from) {
				let _this = this
				console.log(from)
				_this.$Request.request('/api/weixinpays/toWeixinPay', 'POST', {
					pkey: _this.pkey,
					from: from,
				}, true).then(res => {
					console.log(res)
					console.log(from)
					if (res.status == 1) {
						if (from == 'mini') {
							uni.requestPayment({
								...res.data,
								success: function(res) {
									// console.log(res)
									_this.$api.msg(`支付成功`)
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/money/paySuccess'
										})
									}, 800)
								}
							})
						} else if (from == 'uniapp') {
							console.log('2')
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: res.data.orderInfo,
								success: function(res) {
									_this.$api.msg(`支付成功`)
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/money/paySuccess'
										})
									}, 800)
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							})
						}
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>
<style lang='scss'>
	.app {
		width: 100%;
	}

	.inputContain {
		height: 110rpx;
		@extend %flexAlCenter;

		input {
			background-color: #F8F8F8;
			width: 80%;
			height: 60rpx;
		}

		.paybtn {
			background-color: $themColor;
			border-radius: 8rpx;
			padding: 0 26rpx;
			@include textCenter(55rpx);
			color: #fff;
			letter-spacing: 0.2em;
		}
	}

	.price-box {
		background-color: #fff;
		height: 265upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: #909399;

		.price {
			font-size: 50upx;
			color: #303133;
			margin-top: 12upx;

			&:before {
				content: '￥';
				font-size: 40upx;
			}
		}
	}

	.pay-type-list {
		margin-top: 20upx;
		background-color: #fff;
		padding-left: 60upx;

		.type-item {
			height: 120upx;
			padding: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60upx;
			font-size: 30upx;
			position: relative;
		}

		.icon {
			width: 100upx;
			font-size: 52upx;
		}

		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}

		.icon-weixinzhifu {
			color: #36cb59;
		}

		.icon-alipay {
			color: #01aaef;
		}

		.tit {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 4upx;
		}

		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}

	.mix-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630upx;
		height: 80upx;
		margin: 80upx auto 30upx;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
	
	
	/* 密码弹框css */
	.pay-popup {
		width: 600upx;
		background: #fff;
		border-radius: 16upx;
		padding: 40upx 0upx 12rpx;
		box-sizing: border-box;
		.popup-top {
			padding: 0px 30upx;
			box-sizing: border-box;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 34upx;
			.popup-title {
				font-size: 36upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292929;
			}
		}
		.pas-box {
			padding: 0px 30upx;
			box-sizing: border-box;
		}
		.popup-pas {
			width: 100%;
			height: 100upx;
			// border: 2upx solid #393873;
			background: #F2F3F5;
			padding: 0px 26upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32upx;
			color: #292929;
			border-radius: 10upx;
			margin-bottom: 40upx;
		}
		
		.popup-btn {
			display: flex;
			align-items: center;
			padding-top: 10rpx;
			border-top: 2rpx solid rgba(0, 0, 80, 0.05);
			.btn {
				width: 50%;
				height: 87rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 34rpx;
				color: #909090;
			}
			.btn:last-child {
				color: #EE486C;
				border-left: 2rpx solid rgba(0, 0, 80, 0.05);
			}
		}
	}
	
</style>
